vue实现农历日历插件

您所在的位置：网站首页 › 小程序日历组件 › vue实现农历日历插件

vue实现农历日历插件

2023-03-23 18:24| 来源: 网络整理| 查看: 265

出美国区，香港区苹果ID小号，独享账号！不含小火箭，不要买错了！点击购买！

最近在写后台管理系统，需要实现一个功能就是农历日历组件，需要实现选择日历/回显日历等功能

效果图如下：在这里插入图片描述 vue-jlunar-datepicker这个插件本身是基于vue2.0和elementUi框架来实现的。

所以后面会有关于部分样式的改动。

参考大神的vue农历日期组件的链接：https://www.cnblogs.com/zeussbook/p/16208969.html

gitee 农历日期组件的链接：https://toscode.gitee.com/tuhe32/vue-jLunar-datePicker 在这里插入图片描述下面介绍该组件的使用步骤：

1.插件的安装——npm install vue-jlunar-datepicker --save

如果安装过程中，出现报错，一般在终端中会显示出来解决办法

我这边确实报错了，提示的信息是elementUi版本不兼容的问题，解决方法就是： npm install vue-jlunar-datepicker --save --force

2.插件在main.js中引入并注册 import Vue from 'vue';//这行main.js中本来就有 import JDatePicker from 'vue-jlunar-datepicker'; Vue.component("j-date-picker",JDatePicker); 3.html页面中的使用

data中参数的定义：

data(){ return{ form: { birthdaydate: 'L2023-02-21', }, type: 'DATE', showLunarClass: 'MIX', showBackYears: 2, showLunarIcon: true, showLunarControl: true, width1: '300', format: 'YYYY/MM/DD', placeholder: '请选择日期', rangeSeparator: '-', disabled: false, editable: true, clearable: true, pickerOptions: { disabledDate(time) { // return time.getTime() methods中方法的定义： methods:{ onDateChange(val) { this.form.birthdaydate = val; this.$forceUpdate(); }, }

css中样式代码如下：

::v-deep.icon-richeng:before { content: '>'; } /deep/.full-jcalendar__body { height: 240px !important; } /deep/.full-jcalendar .input__inner:focus { border-color: #f90; } .full-jcalendar .input__inner:hover { border-color: #ffcb7c; } /deep/.full-jcalendar__body .data-list li:hover { background-color: #f90; } /deep/.full-jcalendar-header { height: 30px; background: #ffeacb; } /deep/.full-jcalendar__body { border: 1px solid #ebebeb; } /deep/.full-jcalendar-header label { display: none !important; } /deep/.full-jcalendar .input__inner, /deep/input::input-placeholder { font-size: 13px !important; color: #999 !important; } /deep/.full-jcalendar__body .day-cell.select, /deep/.full-jcalendar__body .data-list li.select-year { background-color: #f90; } /deep/.day-cell.today.select .number.is-today.is-empty { color: #fff !important; } /deep/.day-cell.today .number.is-today.is-empty { color: #f90 !important; } /deep/.full-jcalendar__body .day-cell.today:before, /deep/.full-jcalendar__body .data-list li.curr-year::before { border-top: 0.5em solid #f90 !important; } /deep/.full-jcalendar-header .title-year:hover, /deep/.full-jcalendar-header .title-month:hover { color: #f90 !important; } /deep/.full-jcalendar__main { width: 100% !important; } /deep/.iconfont.icon-richeng::before { content: '' !important; } /deep/.icon.iconfont.icon-xiangyoujiantou::before { content: '>' !important; } /deep/.icon.iconfont.icon-xiangzuojiantou::before { content: '

【本文地址】

vue实现农历日历插件

vue实现农历日历插件

今日新闻

推荐新闻